<template>
  <div>
    <div v-if="glList.length"  style="display: flex;">
      
    <div class="check-topic">
      <div @click="checkTopic(item)"
       v-for="item in glList" 
       :key="item.configId"
       :class="{'is-active':item.configId == checkTopicObj.configId}"
       style="height: 50px;    line-height: 50px;
    padding: 0 10px;
    box-sizing: border-box;text-align: center;"
       >
        {{item.questionName}} （{{ item.avgScore }}分）
      </div>
    </div>
    <div style="flex: 1;width: calc(100% - 200px);">
      <el-select
        v-model="teacherSelect"
        placeholder="选择教师"
        clearable
        style="margin-bottom: 10px;"
        @change="handleSearch" filterable 
      >
        <el-option
          v-for="item in teacherList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-table
        stripe
          border
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column
          label="教师姓名"
          align="center"
          prop="teacherName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="教师手机号"
          align="center"
          prop="phone"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="阅卷量"
          align="center"
          prop="tokenId123"
          :show-overflow-tooltip="true"
        >
      <template slot-scope="scope">
        {{scope.row.completedTasks }}/{{  scope.row.totalTasks }}
      </template>
      </el-table-column>
        <el-table-column
          label="最高分"
          align="center"
          prop="hightScore"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="最低分"
          align="center"
          prop="lowScore"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="平均分"
          align="center"
          prop="avgScore"
          :show-overflow-tooltip="true"
        />
        <!-- <el-table-column
          label="给分耗时（秒）"
          align="center"
          prop="costTime"
          :show-overflow-tooltip="true"
        /> -->
      </el-table>
    </div>
  </div>

  <el-empty v-else v-loading="loading" description="暂无数据"></el-empty>
  <div class="page-bottom">
      
 <div class="sel-box">
        <!-- <p>
          已选 <span>{{ ids.length }}</span> 项 / 共 {{ total }} 项
        </p> -->
        <el-button type="primary" @click="debouncedSearch">刷新进度</el-button>
        
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getxmglOverviewList"
      />
    </div>
  </div>
</template>

<script>
import {
  subjectpage,
  subjectAdd,
  subjectEdit,
  subjectDel,
} from "@/api/xmgl/ksgl";
import { subjectlistselect, checkPassword } from "@/api/common";
import { xmglTopicList, getTeacherSelect, xmglOverviewList, statistics } from "@/api/xmgl/pyjd";
import { groupDetail } from "@/api/jcgl/xkgl";
import { watch } from "vue";
export default {
  props: {
    xmxx: {},
    qbxklb: null,
    xmxklb: null,
    subjectId: null,
    subjectName:undefined
  },
  data() {
    return {
      glList:[],
      checkTopicObj:{},
      loading: false,

      ids: [],

      total: 0,
      tableData: [],

      multiple: true,

      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },

      editKmVisible: false,
      rules: {
        subjectName: [
          { required: true, message: "科目名称不能为空", trigger: "blur" },
        ],
      },
      teacherSelect:undefined,
      teacherList:[],
      xklb: [],
      loading:false,
      editList: [
        {
          name: "",
          subjectId: "",
          subjectName: "",
          examId: this.xmxx.id,
        },
      ],
    };
  },
  watch:{
     subjectId:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal);
        
         if (newVal === '0' && oldVal === undefined) {
          return false
        }
        if (Number(newVal) && oldVal === '0') {
      this.loading = true;
        //   statistics({examId:this.subjectId}).catch(err=>{
        //     this.$message.error('更新数据失败')
        //   }).finally(res=>{
        // console.log(res);
        this.getList()
      // })
          this.getRatingTeacherSelect()
        }
        if (Number(newVal) && oldVal === undefined) {
      this.loading = true;
        //   statistics({examId:this.subjectId}).catch(err=>{
        //     this.$message.error('更新数据失败')
        //   }).finally(res=>{
        // console.log(res);
        this.getList()
      // })
          this.getRatingTeacherSelect()
        }
        if (Number(newVal) && Number(oldVal)) {
      this.loading = true;
        //   statistics({examId:this.subjectId}).catch(err=>{
        //     this.$message.error('更新数据失败')
        //   }).finally(res=>{
        // console.log(res);
        this.getList()
      // })
          this.getRatingTeacherSelect()
        }
        // if(newVal&&oldVal!=0){
        // }
      },
      immediate:true,
      deep:true
    },
    'checkTopicObj.configId':{
      handler(newVal,oldVal){
        console.log(newVal,oldVal);
        this.tableData = []
        if (newVal) {
          this.getxmglOverviewList()
        }
      },
      deep:true
    }
  },
  beforeCreate(){
    // statistics({examId:this.subjectId}).then(res=>{
    //     console.log(res);
    //   })
  },
  created() {
    
    // this.getRatingTeacherSelect()
  },
  methods: {
    debouncedSearch(){
      statistics({ examId: this.xmxx.id })
        .catch((err) => {
          this.$message.error("更新数据失败");
        })
        .finally((res) => {
          this.getList();
          this.$emit('getRefreshTime')
        });
    },
    checkTopic(e){
      if (e.id === this.checkTopicObj.configId) {
        return false
      }
      this.checkTopicObj = e
    },
    getxmglOverviewList(){
      let obj = {
        // ...this.queryParams,
        examId: this.subjectId,
        configId: this.checkTopicObj.configId,
        teacherName: this.teacherSelect
      }
      xmglOverviewList(obj).then(res=>{
        if (res.code === 200) {
          this.tableData = res.data
          
        }
      })
    },
    getList() {
      this.tableData = [];
      xmglTopicList(this.subjectId)
        .then((res) => {
          if (res.code === 200) {
            let data = res.data.sort((a,b)=>{
           return a.questionName - b.questionName
          });
            this.glList = data || [];
            this.checkTopicObj = data[0] || {}
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
     // 搜索条件
    handleSearch() {
      this.getxmglOverviewList();
    },
    getRatingTeacherSelect(){
      getTeacherSelect({examId:this.subjectId}).then(res=>{
        if (res.code === 200) {
          this.$nextTick(()=>{
            this.teacherList = res.data
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.jobId);
      this.multiple = !selection.length;
    },

    beforeClose(done) {
      this.editList = [
        {
          name: "",
          subjectId: "",
          subjectName: "",
          examId: this.xmxx.id,
        },
      ];
      this.$nextTick(() => {
        done();
      });
    },
    handleClose() {
      this.beforeClose(() => {
        this.editKmVisible = false;
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.check-topic{
  width: 200px;
  margin-right: 10px;
  cursor: pointer;
  .is-active{
    color: #0052D9;
    background-color: #F2F3FF;
  }
  div:hover{
    background-color: #f7f7fb;
  }
}
</style>